<template>
	<view class="page">
		<view class="bg">
			<c-nav-bar :title="titleHeader" bgColor='transparent' :showHome="false"></c-nav-bar>

			<view class="searchBox">
				<image style="width: 28rpx; height: 28rpx;"
					src="https://i.ringzle.com/file/20240126/c3e23bc0da684731b9706b6fee63dbaf.png" mode="aspectFit">
				</image>
				<span type="input" class="searchContent">
					<u--input clearable fontSize='24rpx' placeholder="请输入航班次" border='none' v-model="value"></u--input>
				</span>
				<span class='searchBtn' @click="search()">搜索</span>
			</view>

			<view class="contain">
				<view class="top">
					<view class="left">
						<span class="blue">
							<image src="https://i.ringzle.com/file/20240520/2602dbaa905246cd9d2629d4a95a8848.png"
								mode="aspectFill"></image>
						</span>
						<span></span>
						<span class="red">
							<image src="https://i.ringzle.com/file/20240520/872a43cbf92549ef8492fd7ff0c1a8e8.png"
								mode="aspectFill"></image>
						</span>
					</view>
					<view class="middle">
						<view @tap="chooseSpot(1)">
							<span style='font-size: 28rpx;margin-right: 20rpx;font-weight: 400;'>出发港口</span>
							<span style=" color: #cbcbcb;" v-if="!beginSpot.name">请输入出发港口</span>
							<span v-else>{{beginSpot.name}}</span>
						</view>
						<view @tap="chooseSpot(2)">
							<span style='font-size: 28rpx;margin-right: 20rpx;font-weight: 400;'>到达港口</span>
							<span style=" color: #cbcbcb;" v-if="!arriveSpot.name">请输入到达港口</span>
							<span v-else>{{arriveSpot.name}}</span>
						</view>
					</view>
					<view class="right" @click="qiehuan">
					</view>
				</view>
			</view>
		</view>
		<view class="contain" style="position: relative;">
			<view class="time">
				<u-icon name="calendar" style="margin-right: 20rpx;" size='20px'></u-icon>{{getDate()}}
			</view>
		</view>
		<view class="table">
			<view class="table_title">
				<span style="width: 20%;">出发时间</span>
				<span style="width: 20%;">航班次</span>
				<span style="width: 27%;">上船码头</span>
				<span style="width: 13%;">轨迹图</span>
			</view>
			<view class="tableContent">
				<view class="" v-if='tableItem.length==0'>
					<nodata></nodata>
				</view>
				<view v-else class="tableItem" v-for="(item,index) in tableItem" :key='index'>
					<span>{{item.sailTime}}</span>
					<span>{{item.lineNum+''+item.sx}}次</span>
					<span>{{item.embarkPortName}}</span>
					<span style="color: #007A69;" @click="goToShipMap(item,index)">查看轨迹 ></span>
				</view>

			</view>
		</view>

		<!-- <u-popup :show="show" @close="close()" @open="open">
			<view class="main">
				<view class="title">
					<text>选择起止地点</text>
					<text @click="close()" style="font-size: 24px;">×</text>
				</view>
				<u-line></u-line>
				<view class="title1">
					出发地点
				</view>

				<view class="begin" @click="chooseBegin(index)" :class="currentBegin==index?'choose':''"
					v-for="(item,index) in beginOptions" :key="index">
					<span>{{item.name}}

					</span>
					<image v-if="currentBegin==index" class="img"
						src="https://i.ringzle.com/file/20231117/2dafc8cdced147bc896cb7c1e26cf7d4.png" mode="aspectFit">
					</image>
				</view>
				<view class="title1">
					到达地点
				</view>
				<view style="margin-bottom: 20rpx;" class="begin" :class="currentArrive==index?'choose':''"
					@click="chooseArrive(index)" v-for="(item,index) in beginOptions" :key="Date.now()+index">
					<span>{{item.name}}</span>
					<image v-if="currentArrive==index" class="img"
						src="https://i.ringzle.com/file/20231117/2dafc8cdced147bc896cb7c1e26cf7d4.png" mode="aspectFit">
					</image>
				</view>
				<u-button size="large" type="primary" shape="circle" @click="handleSpot()">确定</u-button>
			</view>
		</u-popup> -->

		<u-toast ref="uToast"></u-toast>
	</view>
</template>
<script>
	import nodata from '@/compoments/NoData/index.vue'
	import amapFile from "@/utils/amap-wx.130.js";
	export default {
		components: {
			nodata
		},
		data() {
			return {
				mt: uni.getSystemInfoSync().statusBarHeight + 44,
				// h:uni.getSystemInfoSync().windowHeight - 87,
				titleHeader: '船舶轨迹',
				shipInfo: [],
				latitude: null,
				longitude: null,
				textData: {},
				tabBar: false,
				show: false,
				beginOptions: [],
				formData: {},
				currentBegin: 0,
				currentArrive: 0,
				arriveSpot: {
					name: '嵊泗(泗礁)'
				},
				beginSpot: {
					name: '嵊泗(沈家湾)'
				},
				currentTab: 0,
				programme: [],
				routShow: false,
				latitude: '',
				longitude: '',
				exChangeFlag: true,
				station: {},
				tableItem: [],
				value: '',
				gangkoudata: {},
				fanhuidata: {},
				made: true,
			}
		},
		onLoad: function() {
			this.getAllSpot()
			this.geFlightList()
		},
		onReady() {

		},
		computed: {

		},
		methods: {
			goToShipMap(item, index) {
				console.log(item, index);
				// 获取当前时间
				var currentTime = new Date();
				// 设置约定时间
				var appointmentTime = new Date(item.sailDateTime);
				// 比较当前时间和约定时间
				if (currentTime > appointmentTime) {
					this.gangkoudata = item

					const params = {
						lineNum: item.lineNum,
						sx: item.sx,
						startPortNo: item.startPortNo,
						endPortNo: item.endPortNo
					}
					this.$api.post('/api/apishiprealtimeposition/queryShipTicketInfo', params).then(res => {
						console.log(res, 'eeee');
						if (res.data.code === 0) {

							if (res.data.data.cxwThirdDTO.showTrackFlag) {
								uni.navigateTo({
									url: '/pages/touristMap/Satelliteimage?shipInfo=' + JSON.stringify(
										params)
								})
							} else {
								this.$refs.uToast.show({
									type: 'fail',
									title: '',
									message: res.data.data.cxwThirdDTO.errMsg || "本航班暂无轨迹，请选择其他航班次！",
									iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/default.png'
								})
							}
						} else this.$showModal(res.data.msg)
					})

				} else {
					//  console.log("当前时间未超过约定时间");
					this.$refs.uToast.show({
						type: 'fail',
						title: '',
						message: "航班未出发",
						iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/default.png'
					})
				}
			},
			search() {
				if (!this.value) return uni.showToast({
					title: '请输入航班次',
					icon: 'none'
				})
				console.log('laile');
				this.$api.post('/api/apishiprealtimeposition/searchShip', {
					searchBox: this.value
				}).then(res => {
					if (res.data.code == 0) {
						this.tableItem = res.data.data

						if (res.data.data.length == 0) {
							uni.showToast({
								title: '未查询到相关航班',
								icon: 'none'
							})
						}
					} else {
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						})
					}

				})

			},
			getDate() {
				const currentDate = new Date();
				const year = currentDate.getFullYear();
				const month = String(currentDate.getMonth() + 1).padStart(2, '0');
				const day = String(currentDate.getDate()).padStart(2, '0');
				const weekday = ['日', '一', '二', '三', '四', '五', '六'][currentDate.getDay()];

				const formattedDate = `${year}年${month}月${day}日 周${weekday}`;
				return formattedDate
			},


			getAllSpot() {
				this.$api.post('/api/tripspot/selectAll').then(({
					data: res
				}) => {
					if (res.msg == 'success') {
						this.beginOptions = res.data
					}
				})
			},
			qiehuan() {

				if (this.made == true) {
					this.made = false
				} else {
					this.made = true
				}
				// console.log('this.made',this.made) 
				if ((JSON.stringify(this.fanhuidata) == "{}")) {
					if (this.made) {
						this.beginSpot.name = '嵊泗(沈家湾)';
						this.arriveSpot.name = '嵊泗(泗礁)';
						const params = {
							endPortNum: '1010',
							startPortNum: '1028'
						}
						this.geFlightList(params)
						this.value = ''
					} else {
						this.beginSpot.name = '嵊泗(泗礁)';
						this.arriveSpot.name = '嵊泗(沈家湾)';
						const params = {
							endPortNum: '1028',
							startPortNum: '1010'
						}
						this.geFlightList(params)
						this.value = ''
					}

				} else {
					console.log('111111111111111111', this.fanhuidata)
					if (this.made) {
						this.beginSpot.name = this.fanhuidata.to;
						this.gangkoudata.startPortNo = this.fanhuidata.toCode;
						this.arriveSpot.name = this.fanhuidata.from;
						this.gangkoudata.endPortNo = this.fanhuidata.fromCode;
						const params = {
							endPortNum: this.fanhuidata.fromCode,
							startPortNum: this.fanhuidata.toCode
						}
						this.geFlightList(params)
						this.value = ''
					} else {
						this.beginSpot.name = this.fanhuidata.from;
						this.gangkoudata.startPortNo = this.fanhuidata.fromCode;
						this.arriveSpot.name = this.fanhuidata.to;
						this.gangkoudata.endPortNo = this.fanhuidata.toCode;
						const params = {
							endPortNum: this.fanhuidata.toCode,
							startPortNum: this.fanhuidata.fromCode
						}
						this.geFlightList(params)
						this.value = ''
					}
				}



				// this.beginSpot.name = data.to;
				// this.gangkoudata.startPortNo = data.toCode;
				// this.arriveSpot.name = data.from;
				// this.gangkoudata.endPortNo = data.fromCode;
				// const params = {
				// 	endPortNum: data.fromCode,
				// 	startPortNum: data.toCode
				// }
				// this.geFlightList(params)
				// this.value = ''

			},

			chooseSpot(type) {
				uni.navigateTo({
					url: '/pagesIndex/shipLocation/selectPort?type=' + type,
					events: {
						selectedShip: data => {
							console.log(data, '+++++data++++');
							this.fanhuidata = data;

							this.beginSpot.name = data.to;
							this.gangkoudata.startPortNo = data.toCode;
							this.arriveSpot.name = data.from;
							this.gangkoudata.endPortNo = data.fromCode;
							const params = {
								endPortNum: data.fromCode,
								startPortNum: data.toCode
							}
							this.geFlightList(params)
							this.value = ''
						}
					}
				})
			},
			geFlightList(item) {
				const params = {
					endPortNo: item?.endPortNum || '1010',
					startPortNo: item?.startPortNum || '1028'
				}
				this.$api.post('/api/apishiprealtimeposition/flightList', params).then(res => {
					if (res.data.code == 0) {
						this.tableItem = res.data.data
						console.log(res, '11111');
					}
				})
			},
			close() {
				this.show = false
			},
			open() {

			},
			chooseBegin(index) {
				this.currentBegin = index
				if (this.currentBegin && this.currentArrive) {
					this.handleSpot()
				} else {
					return
				}
			},
			chooseArrive(index) {
				this.currentArrive = index
				if (this.currentBegin && this.currentArrive) {
					this.handleSpot()
				} else {
					return
				}
			},
			handleSpot() {
				this.beginOptions.forEach((item, index) => {
					if (index == this.currentBegin) {
						this.beginSpot = item

					}
				})
				this.beginOptions.forEach((item, index) => {
					if (index == this.currentArrive) {
						this.arriveSpot = item

					}
				})
				this.show = false
			},

			tabChoose(index) {
				this.currentTab = index

			}
		}
	}
</script>

<style lang="scss" scoped>
	$color-primary: #007A69;

	.page {

		height: 100vh;

		.contain {

			background: #FFFFFF;
			border-radius: 16rpx;

			.time {
				font-weight: 700;
				padding: 20rpx;
				display: flex;
				flex-direction: row;
				align-self: center;
				position: absolute;
				top: -56rpx;
				align-items: center;

				font-size: 26rpx;
				width: 100%;
				background-color: #fff;


			}
		}

		.table {
			margin-top: 30rpx;

			.table_title {
				background: #F5F8FA;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-content: center;
				padding: 20rpx 51rpx 20rpx 30rpx;

				color: #666666;
			}

			.tableContent {
				.tableItem {
					align-items: center;
					height: 105rpx;

					border-bottom: 1rpx solid #c5c5c5;
					display: flex;
					justify-content: space-between;
					padding: 0 20rpx;
					background: white;


				}
			}
		}

		.bg {

			background: url('https://i.ringzle.com/file/20240403/8bb25e339a1d475e80bd0dbca360f11a.png') repeat-x center;
			background-size: cover;
			padding-top: 91px;

			.details {
				padding: 0 24rpx;

				.d_items {
					height: 100rpx;
					background: #F5F8FA;
					border-radius: 16rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 0 20rpx;
					margin-top: 20rpx;

					.di_title {
						font-size: 30rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #333333;
					}

					.di_jj {
						display: flex;
						align-items: center;

						image {
							width: 44rpx;
							height: 44rpx;
						}

						.dij_num {
							width: 77rpx;
							height: 44rpx;
							line-height: 44rpx;
							text-align: center;
							font-size: 28rpx;
							font-family: PingFang-SC-Bold, PingFang-SC;
							font-weight: bold;
							color: #333333;
						}
					}
				}

				.place_box {
					padding-top: 36rpx;

					&.pbl {
						padding-top: 64rpx;
						border-top: none;
					}

					.pb_title {
						font-size: 32rpx;
						font-family: PingFang-SC-Bold, PingFang-SC;
						font-weight: bold;
						color: #333333;
					}

					.pb_items {
						overflow: auto;
						margin-top: 40rpx;

						&>view {
							float: left;
							margin: 0 0 20rpx 18rpx;
							width: calc(33.33% - 16rpx);
							height: 80rpx;
							background: #FFFFFF;
							border-radius: 16rpx;
							border: 2rpx solid #EFEFEF;
							line-height: 80rpx;
							text-align: center;
							font-size: 24rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #333333;
							position: relative;
							white-space: nowrap;
							text-overflow: ellipsis;
							overflow: hidden;

							&:nth-child(3n+1) {
								margin-left: 0;
							}

							&.active {
								border: 2rpx solid #007A69;
								color: #01B9F9;
							}

							image {
								width: 34rpx;
								height: 26rpx;
								position: absolute;
								right: 0;
								bottom: 0;
							}
						}
					}
				}
			}

			.searchBox {
				display: flex;
				flex-direction: row;
				border-radius: 38rpx;
				border: 2rpx solid #007A69;
				margin: 0 20rpx;
				padding: 4px 10rpx 4px 30rpx;

				justify-content: space-between;
				align-items: center;
				margin-top: 23rpx;
				background: white;

				.searchContent {
					width: 75%;
					color: #AAAAAA;
					font-size: 24rpx;
				}

				.searchBtn {
					display: block;
					background: #007A69;
					border-radius: 38rpx;
					text-align: center;
					line-height: 47rpx;
					color: white;
					padding: 4rpx 30rpx;

				}
			}

			// padding-top: 120rpx;
			.contain {
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				background: #FFFFFF;
				border-radius: 24rpx;
				transform: translate(0, -35px);
				margin: 0px 20rpx;
				padding: 40rpx 30rpx;

				box-shadow: 0rpx 6rpx 20rpx 0rpx rgba(1, 185, 249, 0.1);

				margin-top: 89rpx;


				.top {
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					align-items: center;
					height: 100%;

					.left {
						display: flex;
						flex-direction: column;
						align-items: center;
						margin-right: 20rpx;

						.blue {
							display: block;
							width: 24rpx;
							height: 24rpx;

							// border-radius: 16rpx;
							// border: 6rpx #188FFE solid;
							image {
								width: 100%;
								height: 100%;
							}
						}

						span:nth-child(2) {
							display: block;
							border-left: 5rpx solid #d5d5d5;
							height: 90rpx;
							border-radius: 7rpx;
							margin: 8rpx 0;
						}

						.red {
							// display: block;
							width: 24rpx;
							height: 24rpx;

							// border-radius: 20rpx;
							// border: 6rpx #FF5252 solid;
							image {
								width: 100%;
								height: 100%;
							}
						}
					}

					.middle {
						width: 526rpx;
						font-size: 30rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 600;
						margin-left: 14rpx;

						// view {
						// 	height: fit-content;
						// 	line-height: 50rpx;
						// 	// border-bottom: #d0d0d0 1rpx solid;
						// 	padding: 36rpx 0 20rpx;
						// }

						view:nth-child(1) {
							height: fit-content;
							line-height: 50rpx;
							// border-bottom: #d0d0d0 1rpx solid;
							padding: 20rpx 0 38rpx;
							border-bottom: #d0d0d0 1rpx solid;
						}

						view:nth-child(2) {
							height: fit-content;
							line-height: 50rpx;
							// border-bottom: #d0d0d0 1rpx solid;
							padding: 38rpx 0 20rpx;
							// border-bottom: #d0d0d0 1rpx solid;
						}
					}

					.right {
						width: 96rpx;
						height: 96rpx;
						background: url('https://i.ringzle.com/file/20240126/3585460d3bf34270976954ba296c4811.png') center repeat;
						background-size: cover;
					}
				}
			}

		}

		.table {}

		.tabbar {
			.map {
				height: 100vh;
				width: 750rpx;
			}

			.tab {
				display: flex;
				justify-content: space-evenly;
				font-size: 32rpx;
			}

			.tabChoose {
				color: #007A69;
				border-bottom: #007A69 solid 4rpx;
				padding-bottom: 10rpx;

			}

			.tabContain {
				.item {
					width: 702rpx;
					height: 200rpx;
					background: #FFFFFF;
					box-shadow: 0rpx 6rpx 20rpx 0rpx rgba(1, 185, 249, 0.1);
					border-radius: 24rpx;
					margin-top: 20rpx;
					padding: 25rpx 20rpx;

					.top {
						display: flex;
						justify-content: space-between;

						.title {
							font-weight: 600;
							font-size: 26rpx;
						}

						span:nth-child(2) {
							color: $color-primary;
						}
					}

					.row {
						height: 150rpx;
						display: flex;
						align-items: center;
						justify-content: center;

						.inside {
							display: flex;
							align-items: flex-start;

							.nodeTop {
								height: 24rpx;
								width: max-content;
								display: flex;
								align-items: center;

								.node {
									height: 1rpx;
									border-top: 1rpx dashed #01B9F9;
									margin: 0 20rpx;
								}
							}

							.name {
								width: max-content;
								display: flex;
								align-items: center;
								flex-direction: column;

								.circle {
									margin-bottom: 10rpx;
									width: 24rpx;
									height: 24rpx;
									border: 2rpx solid #01B9F9;
									border-radius: 22rpx;
								}

							}

						}
					}

					.middle {
						color: $color-primary;
						margin: 40rpx 0 20rpx;
						width: 100%;
						display: flex;
						justify-content: center;

						.suit {
							flex-direction: row;
							justify-content: space-evenly;
							align-items: center;
							display: inline-flex;




						}
					}


				}

			}
		}
	}

	.choose {
		background: #F3FCFF;
		border-radius: 16rpx;
		border: 2rpx solid #007A69 !important;
		color: #007A69;
	}



	.main {
		height: 1033rpx;
		padding: 20rpx;
		border-top-left-radius: 16rpx;
		border-top-right-radius: 16rpx;
		overflow-y: auto;

		.title {
			display: flex;
			flex-direction: row;
			font-size: 36rpx;
			margin-bottom: 20rpx;
			line-height: 36rpx;

			text:nth-child(1) {
				width: 700rpx;
				text-align: center;
				display: block;
				line-height: 36rpx;
				font-size: 32rpx;
				font-weight: bold;
			}
		}

		.title1 {
			font-weight: bold;
			font-size: 30rpx;
			margin: 20rpx 0;
		}

		.begin {
			width: 30%;
			height: 64rpx;
			border: 1rpx solid #CCCCCC;
			border-radius: 16rpx;
			display: inline-block;
			text-align: center;
			line-height: 64rpx;
			margin: 10rpx;
			position: relative;

			.img {
				width: 34rpx;
				height: 26rpx;
				position: absolute;
				z-index: 3;
				right: 0;
				bottom: 0;
			}
		}

	}

	.map_container {
		position: absolute;
		top: 0;
		bottom: 80px;
		left: 0;
		right: 0;
	}

	.map {
		width: 100%;
		height: 100%;
	}

	.map_text {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0px;
		height: 80px;
		background: #fff;
		padding: 0 15px;
	}

	text {
		margin: 5px 0;
		display: block;
		font-size: 12px;
	}

	.h1 {
		margin: 15px 0;
		font-size: 15px;
	}
</style>